<template>
	<div class="top">
		<a href="http://jsjxy.cuit.edu.cn/" target="_blank"><img src="../assets/logo1.png" alt="" class="topimg"></a>
		<div style="width: 300px">
			<el-input type="text" placeholder="请输入"  v-model="inputValue" @keyup.native.enter="toResult"  ></el-input>
		</div>
		<el-button  @click="toResult" id="search" icon="el-icon-search">搜索</el-button>
		<el-avatar style="margin-right: 10px" icon="el-icon-user-solid"></el-avatar>
		<el-dropdown @command="handleCommand" style="margin-right: 5px">
            <div class="el-dropdown-link" >
                {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="e" divided>退出</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>

<script>
	export default {
		name: "Top",
		data() {
			return{
				inputValue:"国际歌",
				username: '',
			}
		},
		methods:{
			toResult () {
				// 携带参数跳转路由
				this.$router.push({
					name: 'searchResult',
					params: {
						search: this.inputValue,
					},
				})

			},
			handleCommand(command){
				this.$cookie.delete('username');
				this.$message({
					type:"success",
					message: '退出成功'
				})
				this.$router.push({
					path: '/'
				});

			}
		},
		created() {
			this.username=this.$cookie.get('username');
		}
	}
</script>

<style >
.top{
	display: flex;/*弹性布局*/
	align-items: center;
	/*text-align:center;*/
	background-color: #242424;
}
	*{
		margin: 0;
		padding: 0;
	}
.el-dropdown-link {
	cursor: pointer;
	color: #409EFF;
}
.el-icon-arrow-down {
	font-size: 12px;
}
	#search{
		margin-right: 550px;
	}
</style>
